<template>
  <div class="app-container">
    <el-card class="mar_bottom">
      <el-search-form label-width="90px" @search="onSearch" @reset="onReset">
        <el-form-item>
          <el-select
            size="small"
            style="width: 100px; margin-right: -2px"
            v-model="timeType"
            placeholder="请选择"
          >
            <el-option label="创建时间" value="createDate"></el-option>
            <el-option label="订单时间" value="orderTime"></el-option>
          </el-select>
          <el-date-picker
            size="small"
            v-model="searchBody.timeRange"
            style="width: 350px"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="ID">
          <el-input
            clearable
            size="small"
            v-model="searchBody.id"
            class="el-input__small"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input
            clearable
            size="small"
            v-model="searchBody.phone"
            class="el-input__small"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级账号">
          <el-input
            clearable
            size="small"
            v-model="searchBody.pPhone"
            class="el-input__small"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-cascader
            v-model="regionIdList"
            size="small"
            :options="regionTree"
            :props="{
              label: 'name',
              value: 'id',
              checkStrictly: true,
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="邀请码">
          <el-input
            clearable
            size="small"
            v-model="searchBody.yaoqingma"
            class="el-input__small"
          ></el-input>
        </el-form-item>

      </el-search-form>
    </el-card>

    <el-card>
      <el-tabs
        style="margin-top: 15px"
        v-model="searchBody.audiStatus"
        @tab-click="getData"
      >
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待审核" name="1"></el-tab-pane>
        <el-tab-pane label="已审核" name="5"></el-tab-pane>
        <el-tab-pane label="测试账号" name="11"></el-tab-pane>

      </el-tabs>

      <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeOpts"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
      <div class="have-pagination-container">
        <el-table v-loading="loading.list" :data="list" border>
          <el-table-column
            label="ID"
            prop="id"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createDate"
            align="center"
            width="160"
          ></el-table-column>
          <el-table-column
            label="公司名称"
            prop="companyName"
            align="center"
            width="300"
          ></el-table-column>
          <el-table-column
            label="城市"
            prop="cityValue"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="价格"
            prop="cityPrice"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="账号"
            prop="loginName"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="联系人"
            prop="contentName"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="联系人电话"
            prop="contentPhone"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="对接商务"
            prop="puserPhone"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="营业执照"
            prop="yingYeZhiZhaoImage"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-image style="width: 30px; height: 30px" :src="scope.row.yingYeZhiZhaoImage" :preview-src-list="[scope.row.yingYeZhiZhaoImage]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="余额"
            prop="balance"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            label="冻结金额"
            prop="dongjieBalance"
            align="center"
            width="50"
          ></el-table-column>

          <el-table-column
            align="center"
            label="操作"
            width="250"
          >
            <template slot-scope="scope">

              <el-button
                type="text"
                size="small"
                :disabled="scope.row.audiStatus==='5'"
                @click="handleClick('shenhe', scope.row)"
                v-if="isShowShenhetongguo"
              >审核通过</el-button>
<!--              <el-button
                type="text"
                size="small"
                @click="handleClick('zxRegion', scope.row)">行政区域</el-button>-->
              <el-button
                type="text"
                size="small"
                @click="handleClick('xiaofeiLog', scope.row)">消费记录</el-button>
              <el-button
                type="text"
                size="small"
                @click="handleClick('updateDetail', scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeOpts"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </el-card>


    <!-- 审核通过弹窗 -->
    <el-dialog
      :title="shenhetongguoTitle"
      :visible.sync="shenhetongguoDialog"
      width="50%"
      :close-on-click-modal="false"
    >

      <div class="demo-image__preview">
        <el-image
          style="width: 330px; height: 330px"
          :src="yingyezhizhaoDialogImage">
        </el-image>
      </div>

      <el-form
        label-width="100px"
        ref="updateForm2"
        inline
        :model="updateForm"
      >
        <el-form-item label="装修公司金额" prop="cityPrice">
          <el-input
            clearable
            size="small"
            v-model="updateForm.cityPrice"
            class="el-input__small"
            id="yaoqingma"
          ></el-input>
        </el-form-item>

<!--        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            v-model="updateForm.remark">
          </el-input>
        </el-form-item>-->
      </el-form>



      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="shenhetongguoDialog = false"
        >取 消</el-button
        >
        <el-button type="primary" @click="handleSure('setShenhetongguo')"
        >确 定</el-button
        >
      </span>
    </el-dialog>


    <!-- 行政区域弹窗 -->
    <el-dialog
      title="行政区域"
      :visible.sync="zxRegionDialog"
      width="90%"
      :close-on-click-modal="false"
      :row-class-name="tableRowClassName"
    >

      <el-table
        ref="Table"
        :data="zxRegionList"
        row-key="id"
        border
        @row-click="handleRowClick"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          v-if="tableColumn[0].checked"
          label="ID"
          prop="code"
        ></el-table-column>
        <el-table-column
          v-if="tableColumn[1].checked"
          label="名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          v-if="tableColumn[2].checked"
          label="简称"
          prop="name"
        ></el-table-column>
<!--        <el-table-column
          v-if="tableColumn[3].checked"
          label="系统奖励"
          prop="price"
        ></el-table-column>-->
        <el-table-column
          v-if="tableColumn[3].checked"
          label="价格"
        >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                @change="handleClick('setZxRegionPrice',scope.row)"
                size="small"
              ></el-input>
            </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick('shenheshibai', scope.row)">审核失败</el-button>
          </template>
        </el-table-column>
      </el-table>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="shouyiDialog = false"
        >关 闭</el-button
        >
        <!--        <el-button type="primary" @click="handleSure('updateValue')"
                >确 定</el-button
                >-->
      </span>
    </el-dialog>

    <!-- 消费记录弹窗 -->
    <el-dialog
      title="收益明细"
      :visible.sync="zxXiaofeiLogDialog"
      width="75%"
      :close-on-click-modal="false"
    >

      <!-- 二级节点value列表 -->
      <div class="have-pagination-container">
        <el-table border v-loading="loading.childList" :data="childList"  :row-class-name="shouyiTableRowClassName" >
          <el-table-column width="50" prop="id" label="ID"></el-table-column>
          <el-table-column width="100" prop="typeValue" label="类型"></el-table-column>
          <el-table-column width="200" prop="companyName" label="公司"></el-table-column>
          <el-table-column width="100" prop="price" label="金额"></el-table-column>
          <el-table-column width="200" prop="topUpOrderNo" label="充值订单"></el-table-column>
          <el-table-column width="200" prop="orderNo" label="家装订单"></el-table-column>
          <el-table-column width="100" prop="balance" label="余额"></el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination
          @current-change="handleCurrentChangeChild('childList', $event)"
          @size-change="handleSizeChangeChild('childList', $event)"
          :current-page.sync="childPageNo"
          :page-size="childPageSize"
          :page-sizes="pageSizeOpts"
          layout="total, sizes, prev, pager, next"
          :total="childTotalCount"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="zxXiaofeiLogDialog = false"
        >关 闭</el-button
        >
        <!--        <el-button type="primary" @click="handleSure('updateValue')"
                >确 定</el-button
                >-->
      </span>
    </el-dialog>

    <!-- 修改详情 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="handleType == 'add' ? '新增' : '修改'"
      :visible.sync="updateDialog"
      width="50%"
    >
      <el-form
        ref="updateForm3"
        :model="updateForm3"
        label-width="120px"
      >
        <el-form-item label="城市">
          <el-cascader
            v-model="updateForm3.regionId"
            size="small"
            :options="regionTree"
            :props="{
                    label: 'name',
                    value: 'id',
                    checkStrictly: true,
                  }"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="updateForm3.cityPrice" class="inputbox"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateCity">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  paidanOrder,
  selectPaidanPageVo,
  selectRegionTree,
  sysDictbyMultiType,
  addNewOrder,
  editXiansuo,
  exportInData,
  exportOutData,
  selectRegisterListPage,
  jiazhuangdingdanshenhe,
  updateUserLevel,
  selectShouyiPageByOrder,
  selectShouYiPageByUser,
  userSetYaoqingma,
  qrCode,
  selectZxRegionTree,
  selectZxCompanyPageData,
  zxCompanyShenhe,
  selectXiaofeiLogVoPage,
  updateCompanyRegion,
  zxComanyHoutaiQiandan
} from "@/api/api.js";
import { getApiUrlList } from '@/utils/auth'
const getDefaultForm3 = () => ({
  regionId:null,
  levelId:null,
  userId:null,
  yaoqingma:null,
  cityPrice:null,
});
const getDefaultForm = () => ({
  levelId:null,
  userId:null,
  yaoqingma:null,
  cityPrice:null,
});
const getDefaultSearchBody = () => ({
  timeRange: null,
  resource: null,
  phone: null,
  yezhu: null,
  orderNo: null,
  userIdList: null,
  id: null,
  audiStatus: "0",
  levelId:null,
  yaoqingma:null,
});
export default {
  data() {
    return {
      detailId:null,
      updateDialog : false,
      regionTree: [],
      regionIdList:null,
      companyDetailId:null,
      shenhetongguoTitle:"审核通过",
      shenhetongguoDialog:false,
      yingyezhizhaoDialogImage:null,
      yingyezhizhaoDialogImageList:[],
      orderRiZhi: [],
      areaOptions: [],
      qdzOptions: [],
      resourceOptions: [],
      fw1Options: [],
      fw2Options: [],
      zxfs1Options: [],
      zxfs2Options: [],
      zxfs3Options: [],
      zxfs4Options: [],
      xhfgOptions: [],
      zxysOptions: [],
      jsStatusOptions: [],
      timeType: "createDate",
      searchType: "phone",
      dialogTitle: "",
      dialogTitle2: "",
      dialogTitle3: "",
      handleType: "",
      pageNo: 1,
      pageSize: 20,
      totalCount: 0,
      childPageNo: 1,
      childPageSize: 20,
      childTotalCount: 0,
      pageSizeOpts: [20, 50, 100, 300, 500],
      loading: {
        list: false,
        list2: false,
        xiaofeiLogList: false,
      },
      zxRegionList: [],
      list: [],
      paidanData: {},
      selectRow: [], // 选中行
      lookDialog: false,
      editDialog: false,
      paidanDialog: false,
      zxRegionDialog: false,
      zxXiaofeiLogDialog: false,
      updateForm: getDefaultForm(),
      updateForm3: getDefaultForm3(),
      searchBody: getDefaultSearchBody(),
      configDialog:false,
      yaoqingmaDialog:false,
      tableColumn: [
        {
          label: "线索ID",
          checked: true,
        },
        {
          label: "线索业主",
          checked: true,
        },
        {
          label: "线索手机",
          checked: true,
        },
        {
          label: "线索城市",
          checked: true,
        },
        {
          label: "派单",
          checked: true,
        },
        {
          label: "接单",
          checked: true,
        },
        {
          label: "订单",
          checked: true,
        },
        {
          label: "结算",
          checked: true,
        },
        {
          label: "标记",
          checked: true,
        },
        {
          label: "更新小计",
          checked: true,
        },
        {
          label: "来源",
          checked: true,
        }
       /* {
          label: "管理员/渠道主/达人",
          checked: true,
        },*/
        /*{
          label: "手机归属",
          checked: true,
        },
        {
          label: "线索时间",
          checked: true,
        },
        {
          label: "需求时间（订单）",
          checked: true,
        },
        {
          label: "更新时间",
          checked: true,
        },
        {
          label: "更新人",
          checked: true,
        },*/
      ],
      shouyiUserId: 0,
      shouyiDialog: false,
      isShowShenhetongguo:false,
    };
  },
  created() {
    this.getData();
    var apiUrlList = getApiUrlList();
    if(apiUrlList.includes("/zxCompany/post/zxCompanyShenhe")){
      this.isShowShenhetongguo=true;
    }

    //this.getQdzOptions();
    //this.getOptions();
  },
  methods: {
    updateCity(){
      var regionId = null;
      if (this.updateForm3.regionId != null) {
        var length = this.updateForm3.regionId.length;
        regionId = this.updateForm3.regionId[length - 1];
      };
      updateCompanyRegion({
        id: this.detailId,
        regionId:regionId,
        cityPrice:this.updateForm3.cityPrice
      }).then((res) => {
        this.$message.success(res.msg || "操作成功");
        this.getData();
      });
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleRowClick(row) {
      this.$refs.Table.toggleRowExpansion(row);
    },
    onSearchTypeChange(key) {
      let val;
      for (let key2 of ["yezhu", "phone", "orderNo", "id"]) {
        val = this.searchBody[key2] || val;
      }
      this.searchBody = Object.assign(this.searchBody, {
        [key]: val,
      });
    },
    getData() {
      this.loading.list = true;
      const { timeRange, userIdList, ...rest } = this.searchBody;
      const [startTime, endTime] = timeRange || [null, null];
      /*const _userIdList = (userIdList || []).reduce((a, b) => {
        return Array.from(new Set(a.concat(b)));
      }, []);*/
      selectZxCompanyPageData({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: startTime,
        endTime: endTime,

        ...rest,
      }).then(({ result }) => {
        this.list = result.data;
        this.totalCount = result.totalCount;
        this.loading.list = false;
      });
      selectRegionTree().then(({ result }) => {
        this.regionTree = result || [];
      });
    },
    handleCurrentChangeChild(type, val) {
      switch (type) {
        case "list":
          this.pageNo = val;
          this.getData();
          break;
        case "childList":
          this.childPageNo = val;
          this.getShouyiData();
          break;
      }
    },
    handleSizeChangeChild(type, val) {
      switch (type) {
        case "list":
          this.pageSize = val;
          this.getData();
          break;
        case "childList":
          this.childPageSize = val;
          this.getShouyiData();
          break;
      }
    },
    getData2() {},
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    shouyiTableRowClassName({row, rowIndex}){
      if (row.levelValue === '黄金') {
        return 'huangjing-row';
      }
      return '';

    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.selectIds = val.map((d) => d.id);
    },
    onSearch() {
      this.pageNo = 1;
      this.getData();
    },
    onReset() {
      this.pageNo = 1;
      this.searchBody = getDefaultSearchBody();
      this.getData();
    },
    getZxTreeData(id) {
      selectZxRegionTree({
        id:id
      }).then(({ result }) => {
        this.zxRegionList = result || [];
      });
    },
    getXiaofeiLogData(companyId) {
      this.loading.childList = true;
      selectXiaofeiLogVoPage({
        pageNo: this.childPageNo,
        pageSize: this.childPageSize,
        companyId: companyId,
      })
        .then(({ result = {} }) => {
          this.childList = result.data;
          this.childTotalCount = result.totalCount;
          this.loading.childList = false;
        })
        .catch(() => {
          this.loading.childList = false;
        });
    },
    handleClick(type, row, title) {
      this.handleType = type;
      switch (type) {
        case "updateDetail":
          this.updateDialog = true;
          this.updateForm3.regionId = row.regionId;
          this.detailId = row.id;
          break;
        case "xiaofeiLog":
          this.zxXiaofeiLogDialog = true;
          this.getXiaofeiLogData(row.id);
          break;
        case "zxRegion":

          this.zxRegionDialog = true;
          this.shouyiUserId = row.id;
          this.getZxTreeData(row.id);
          break;
        case "shenhe":
          this.companyDetailId = row.id,
          this.updateForm.id=row.id;
          this.shenhetongguoDialog = true;
          this.shenhetongguoTitle = "审核通过 ："+row.companyName;
          this.yingyezhizhaoDialogImage = row.yingYeZhiZhaoImage;
          this.yingyezhizhaoDialogImageList = [];
          this.yingyezhizhaoDialogImageList.push(row.topUpShuidanIamge);
          break;

          break;
        case "add":
          this.dialogTitle2 = "营销-添加";
          this.editDialog = true;
          this.updateForm = getDefaultForm();
          break;
        case "update":
          this.dialogTitle2 = "营销ID:" + row.id + "-编辑";
          selectXiansuoInfoVo({
            id: row.id,
          }).then((res) => {
            const { provinceCode, cityCode, areaCode, ...rest } = res.result;
            this.updateForm = Object.assign(rest, {
              addrCode: [provinceCode, cityCode, areaCode],
            });
            this.editDialog = true;
          });
          break;
        case "exportOut":
          exportOutData().then((res) => {
            this.$message.success("导出成功");
          });
          break;
        case "shenhe":
          this.$confirm(`确认审核通过？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            jiazhuangdingdanshenhe({
              id: row.id,
            }).then((res) => {
              this.$message.success(res.msg || "操作成功");
              this.getData();
            });
          });
          break;
        case "selectShouyi":
          this.shouyiDialog = true;
          this.shouyiUserId = row.id;
          this.getShouyiData();
          break;
        default:
          return;
      }
    },
    handleSure(type, row, title) {
      console.log(type);
      type = type || this.handleType;
      //const { addrCode, ...rest } = this.updateForm;
      switch (type) {
        case "setShenhetongguo":
          this.$confirm(`确认审核通过？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            zxCompanyShenhe({
              id: this.companyDetailId,
              cityPrice:this.updateForm.cityPrice
            }).then((res) => {
              this.$message.success(res.msg || "审核成功");
              this.getData();
            });
          });
          break;
        case "updateSetLevel":
          this.$confirm(`确认修改等级？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            updateUserLevel(
              {
                id:this.updateForm.userId,
                levelId:this.updateForm.levelId
              }
            ).then((res) => {
              this.$message.success(res.msg || "操作成功");
              this.getData();
            });
          });
          break;
        case "updateSetYqm":
          this.$confirm(`确认修改邀请码？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            userSetYaoqingma(
              {
                id:this.updateForm.userId,
                yaoqingma:this.updateForm.yaoqingma
              }
            ).then((res) => {
              this.$message.success(res.msg || "操作成功");
              this.getData();
            });
          });
          break;
        case "paidan":
          paidanOrder({
            orderId: this.paidanData.orderId,
            jiazhuangPlatformIdList: this.selectRow.map((d) => {
              return d.jiazhuangPlatformId;
            }),
          }).then((res) => {
            this.$message.success("派单成功");
            this.paidanDialog = false;
          });
          break;
        default:
          return;
      }
    },
    onSelectionChange(val) {
      this.selectRow = val;
    },
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    uploadData(params) {
      const form = new FormData();
      form.append("file", params.file);
      const loading = this.$loading({
        lock: true,
        text: "正在导入...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      exportInData(form)
        .then((res) => {
          this.$message.success("导入成功");
          loading.close();
        })
        .catch(() => {
          loading.close();
        });
    },
    beforeUpload(file) {
      if (file.size > 1 * 1024 * 1024) {
        this.$message.warning("上传的文件大小不能超过1MB!");
        return false;
      }
    },
  },
};
</script>

<style scoped>
.power_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30px;
  margin-bottom: 10px;
}

.block {
  display: flex;
  height: 70px;
}
.block_item {
  padding: 5px 30px;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  color: #5f5f5f;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.block_item:first-of-type {
  border-right: 0;
  align-self: flex-start;
}
.value {
  font-size: 24px;
  font-weight: bold;
}
.baijin-row {
  background: #fffbec;
}

.huangjing-row {
  background: #fff740;
}
.zuanshi-row {
  background: #95ffff;
}

 .el-table .warning-row {
   background: oldlace;
 }

.el-table .success-row {
  background: #f0f9eb;
}
.test1{
  border: 1px solid red;
}
.el-table--enable-row-transition .el-table__body td {
  height: 80px !important;

}
</style>
